<!--
   -HTML 事件的例子：
	   -当用户点击鼠标时
	   -当网页已加载时
	   -当图像已加载时
	   -当鼠标移动到元素上时
	   -当输入字段被改变时
	   -当提交 HTML 表单时
	   -当用户触发按键时
   -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<script>
			function changetext(id)
			{
				id.innerHTML="Ooops!";
			}
			function checkCookies()
			{
				if (navigator.cookieEnabled==true)
				{
					alert("Cookies 可用")
				}
				else
				{
					alert("Cookies 不可用")
				}
			}
			function toUpper()
			{
				var x=document.getElementById("fname");
				x.value=x.value.toUpperCase();
			}
			function mOver(obj)
			{
				obj.innerHTML="Thank You"
			}
			function mOut(obj)
			{
				obj.innerHTML="Mouse Over Me"
			}
			function yellowtext(x)
			{
				x.style.background="yellow"
			}
		</script>
	</head>
	<body onload="checkCookies()">

		<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

		<h2 onclick="changetext(this)">点击文本!</h2>

		<!--使用 HTML DOM 来分配事件-->
		<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
		<button id="myBtn">点这里</button>
		<script>
			document.getElementById("myBtn").onclick=function(){displayDate()};
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
			}
		</script>
		<p id="demo"></p>

		<!--onload 和 onunload 事件-->
		<p>弹窗-提示浏览器 cookie 是否可用。</p>

		<!--onchange 事件-->
		输入你的名字: <input type="text" id="fname" onchange="toUpper()">
		<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

		<!--onmouseover 和 onmouseout 事件-->
		<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

		<!--onmousedown、onmouseup 以及 onclick 事件-->
		<!--onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。-->
		<!--首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。-->


		<!--onfocus事件-->
		输入你的名字: <input type="text" onfocus="yellowtext(this)">
		<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

		<!--鼠标悬停位置事件-->
		<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1>

	</body>
</html>
